import React, { useEffect } from "react";
import { Button, Form, Input, Select, Space } from "antd";
import TextArea from "antd/es/input/TextArea";
import { CollectionType } from "../../utils/domain/CollectionType";

const { Option } = Select;

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

export const CollectionTypeModal = (props: {
  data: CollectionType;
  onSubmit: (args: CollectionType) => void;
}) => {
  const [form] = Form.useForm();
  const onReset = () => {
    form.resetFields();
  };

  useEffect(() => {
    form.setFieldValue("typeName", props.data.typeName);
    form.setFieldValue("description", props.data.description);
    form.setFieldValue("id", props.data.id);
  }, [props.data]);

  return (
    <Form
      {...layout}
      form={form}
      name="collectionTypeModal"
      onFinish={props.onSubmit}
      style={{ maxWidth: 600 }}
    >
      <Form.Item name="id" hidden></Form.Item>
      <Form.Item name="typeName" label="name" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item
        name="description"
        label="description"
        rules={[{ required: true }]}
      >
        <TextArea rows={6} />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Space>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          <Button htmlType="button" onClick={onReset}>
            Reset
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};
